<template>
  <div class="g-menu-icons-select">
    <div>
      <a-input type="text" disabled="true" v-model:value="selectValue" />
      <span class="setting-icon" @click="openSelect">
        <setting-filled style="font-size: '20px'" />
      </span>
    </div>

    <a-modal
      :visible="iframeVisable"
      @cancel="closeSelect"
      :title="l('MenuIcon')"
      width="1000px"
      height="500px"
      :footer="null"
    >
      <div class="iframe" v-if="iframeVisable" @click="closeSelect">
        <iframe class="icons-iframe" width="1" height="1" src="/iconfont/demo_index.html" />
        <div class="iframe-ul"> </div>
      </div>
    </a-modal>
  </div>
</template>
<script lang="ts">
  import { defineComponent, VueElement } from 'vue';
  import { AppComponentBase } from '/@/shared/component-base';
  import { SettingFilled } from '@ant-design/icons-vue';
  export default defineComponent({
    name: 'g-menu-icons-select',
    mixins: [AppComponentBase],
    components: {
      SettingFilled,
    },
    props: {
      value: {
        type: String,
      },
    },
    data() {
      return {
        selectValue: this.value,
        iframeVisable: false,
      };
    },
    mounted() {
      if (this.iframeVisable) {
        this.setStyle();
      }
    },
    watch: {
      value(val) {
        if (val) {
          this.selectValue = val;
        }
      },
    },
    methods: {
      openSelect() {
        this.iframeVisable = !this.iframeVisable;
        if (this.iframeVisable) {
          this.setStyle();
        }
      },
      closeSelect() {
        this.iframeVisable = false;
      },
      setStyle() {
        setTimeout(() => {
          let frame = document.querySelector('.icons-iframe');
          let doc = (frame as any).contentWindow || (frame as any).contentDocument;

          if (doc.document) {
            doc = doc.document;
          }
          let div = doc.querySelector('.symbol .icon_lists');
          if (div) {
            let iconDiv = document.querySelector('.iframe-ul');
            iconDiv?.appendChild(div);
            let divLis = iconDiv?.querySelectorAll('.dib');

            divLis?.forEach((li) => {
              (li as unknown as VueElement).onclick = () => {
                let classList = li.querySelector('.code-name');
                //console.log(classList?.textContent, 'classList');

                this.selectValue = classList?.textContent as string;
                this.$emit('selectChange', this.selectValue);
              };
            });
          }
        }, 500);
      },
    },
  });
</script>

<style lang="less" scoped>
  .g-menu-icons-select {
    .ant-input {
      width: calc(100% - 45px);
    }
    .setting-icon {
      vertical-align: top;
      display: inline-block;
      height: 32px;
      line-height: 32px;
      width: 45px;
      border: 1px solid #d9d9d9;
      border-left: none;
      text-align: center;
      span {
        font-size: 16px;
      }
    }
  }

  .iframe {
    top: 0px;
    z-index: 9999999;
    background: #fff;
    height: 500px;
    border: 1px solid #d9d9d9;
  }
  .icons-iframe {
    body .main {
      .logo {
        display: none;
      }
      .nav-tabs {
        display: none;
      }
      .tab-container {
        .content.unicode {
          display: none;
        }
        .content.font-class {
          display: none;
        }
      }
    }
  }

  .iframe-ul {
    // width: 1000px;
    // height: 500px;
    // position: absolute;
    // top: 10%;
    // left: 50%;
    // transform: translateX(-50%);
    // background: #fff;
    height: 500px;
    padding: 20px;
    overflow-y: auto;
    border: 1px solid #eee;
    // z-index: 9999;

    :deep(.icon_lists) {
      display: flex;
      flex-wrap: wrap;
      margin: 0;
      padding: 0;
    }
    :deep(li) {
      list-style: none;
      width: 12.5%;
      padding: 10px;
      padding: 10px;
      text-align: center;
    }
    :deep(.dib) {
      cursor: pointer;
    }
    :deep(.icon) {
      display: inline-block;
      font-size: 30px;
      text-align: center;
    }
    :deep(.dib:hover) {
      background: #fcfcfc;
    }
  }
</style>
